<template>
  <div class="page">
    <div class="tools-nav">
      <dl>
        <dd
          v-for="(nav, navindex) in list"
          :key="navindex"
          :id="navindex"
          :class="{ nav_active: navindex == curIndex }"
        >
          <a :href="`#${nav.id}`" @click="toNav(navindex)">{{ nav.name }}</a>
        </dd>
      </dl>
    </div>
    <div class="tools-box">
      <section v-for="(tool, index) in list" :key="index">
        <span :id="tool.id" class="point"></span>
        <header>{{ tool.name }}</header>
        <a target="_blank" 
          class="tool-item" 
          v-for="link in tool.collection" 
          :key="link.link" 
          :href="link.link"
        >
          <img :data-src="link.icon" alt="" :src="link.icon" />
          <span class="tool-name">{{ link.name }}</span>
        </a>
      </section>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const list = ref([
  {
    id: 'often',
    name: '常用工具',
    collection: [
      {
        icon: 'https://caniuse.com/img/favicon-128.png',
        name: '兼容性查询',
        link: 'https://caniuse.com/'
      },
      {
        icon: 'https://www.bootcdn.cn/assets/ico/favicon.ico?1644166305141',
        name: 'BootCDN',
        link: 'https://www.bootcdn.cn/'
      },
      {
        icon: 'https://static.clewm.net/static/images/favicon.ico',
        name: '草料二维码',
        link: 'https://cli.im/'
      },
      {
        icon: 'https://www.hlcode.cn/favicon.ico',
        name: '互联二维码',
        link: 'https://www.hlcode.cn/'
      }
    ]
  },
  {
    id: 'img',
    name: '图片处理',
    collection: [
      {
        icon: 'https://tinypng.com/images/favicon.ico',
        name: '图片压缩',
        link: 'https://tinypng.com/'
      },
      {
        icon: 'https://www.toptal.com/developers/css/sprite-generator/static/images/favicon.png',
        name: '生成精灵图',
        link: 'https://www.toptal.com/developers/css/sprite-generator'
      },
      {
        icon: 'https://www.toptal.com/developers/css/sprite-generator/static/images/favicon.png',
        name: '图片背景消除',
        link: 'https://www.remove.bg/zh'
      },
      {
        icon: 'https://huatu.98youxi.com/favicon.ico',
        name: '流程图/思维导图',
        link: 'https://huatu.98youxi.com/home/myfile/'
      },
    ]
  },
  {
    id: 'css',
    name: 'css工具',
    collection: [
      {
        icon: '',
        name: '贝塞尔曲线',
        link: 'https://cubic-bezier.com/#.17,.67,.83,.67'
      },
      {
        icon: 'https://www.bezier-curve.com/favicon.ico',
        name: '贝塞尔曲线',
        link: 'https://www.bezier-curve.com/'
      },
      {
        icon: '	https://cssgradient.io/images/favicon-23859487.png',
        name: 'css渐变色',
        link: 'https://cssgradient.io/'
      },
      {
        icon: 'https://static.mybrandnewlogo.com/images/favicon.ico',
        name: '色彩搭配',
        link: 'https://mybrandnewlogo.com/color-palette-generator'
      },
      {
        icon: 'https://s.techbrood.com/themes/techbrood/image/favicon.ico',
        name: 'border-radius',
        link: 'https://wow.techbrood.com/fiddle/40829'
      },
      {
        icon: 'https://shadows.brumm.af/favicon.svg',
        name: 'css阴影',
        link: 'https://shadows.brumm.af/'
      },
      {
        icon: 'https://box-shadow.art/wp-content/uploads/2021/10/logo-icon-150x150.png',
        name: 'box-shadow案例',
        link: 'https://box-shadow.art/'
      },
      {
        icon: '	https://cssgrid-generator.netlify.app/favicon.ico',
        name: 'Grid网格布局',
        link: 'https://cssgrid-generator.netlify.app/'
      },
      {
        icon: 'https://layout.bradwoods.io/favicon.ico',
        name: '布局生成器',
        link: 'https://layout.bradwoods.io/'
      },
      {
        icon: '	https://animxyz.com/assets/static/animxyz-logo.ce0531f.39f3bde368e480505b70778acaa2ac74.png',
        name: 'animxyz',
        link: 'https://animxyz.com/'
      },
      {
        icon: 'https://www.transition.style/favicon.png',
        name: '过渡动画',
        link: 'https://www.transition.style/'
      },
      {
        icon: 'https://getwaves.io/favicon-32x32.png',
        name: 'svg波浪生成器',
        link: 'https://getwaves.io/'
      },
      {
        icon: 'https://img2.baidu.com/it/u=3541918504,2197745291&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=287',
        name: 'svg生成器',
        link: 'https://app.haikei.app/'
      }
    ]
  },
  {
    id: 'cool',
    name: 'UI灵感',
    collection: [
      {
        icon: '	https://whirl.netlify.app/favicon.ico',
        name: 'whirl加载动效',
        link: 'https://whirl.netlify.app/'
      },
      {
        icon: 'https://uiverse.io/favicon-32x32.png',
        name: 'uiverse按钮',
        link: 'https://uiverse.io/buttons'
      },
      {
        icon: 'https://www.handsome-css.com/favicon/favicon.ico',
        name: 'AwA-UI小组件',
        link: 'https://www.handsome-css.com/buttons'
      },
      {
        icon: 'https://csscoco.com/inspiration/logo2.png',
        name: 'CSS Inspiration',
        link: 'https://csscoco.com/inspiration/#/'
      },
      {
        icon: 'https://shiroi.netlify.app/favicon.ico',
        name: 'Shiro',
        link: 'https://shiroi.netlify.app/'
      },
      {
        icon: 'https://cssdesignawards.com/images/favicons/favicon.ico',
        name: 'CssDesignAwards',
        link: 'https://cssdesignawards.com/'
      },
      {
        icon: 'https://webdesignclip.com/favicon.ico',
        name: 'WebDesignClip',
        link: 'https://webdesignclip.com/'
      },
    ]
  },
  {
    id: '图标',
    name: '图标',
    collection: [
      {
        icon: 'https://img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico',
        name: 'iconfont',
        link: 'https://www.iconfont.cn/'
      },
      {
        icon: 'https://unpkg.byted-static.com/byted/arco-config/1.0.9/assets/icon-box.ico',
        name: 'iconBox',
        link: 'https://arco.design/iconbox/libs'
      },
      {
        icon: 'https://lf1-cdn2-tos.bytegoofy.com/bydesign/iconparksite/logo.svg',
        name: 'iconPark',
        link: 'https://iconpark.oceanengine.com/official'
      },
      {
        icon: 'https://iconsvg.xyz/favicon-32.png',
        name: '自定义icon',
        link: 'https://iconsvg.xyz/'
      },
      {
        icon: '	https://www.fonts.net.cn/favicon.ico',
        name: '字体天下',
        link: 'https://www.fonts.net.cn/'
      },
      {
        icon: '	https://www.googlefonts.cn/Public/google/zh-cn/gstatic/google_fonts_lodp.ico',
        name: '字体下载',
        link: 'https://www.emojiall.com/zh-hans'
      },
      {
        icon: '	https://www.emojiall.com/favicon.ico',
        name: 'emojiall',
        link: 'https://www.emojiall.com/zh-hans'
      },
      {
        icon: 'https://www.webfx.com/wp-content/uploads/2023/05/icon-ux.svg',
        name: 'md-emoji',
        link: 'https://www.webfx.com/tools/emoji-cheat-sheet/'
      }
    ]
  }
])

const curIndex = ref(0)
const toNav = (index) => {
  curIndex.value = index
}
</script>

<style lang="scss" scoped>
.page {
  margin: 0 auto;
  position: relative;
  max-width: 1300px;
}
.tools-nav {
  position: fixed;
  width: fit-content;
  height: fit-content;
  max-height: calc(100% - 110px);
  padding: 8px 0;
  box-sizing: border-box;
  transition: all 0.2s linear;
  overflow: auto;
  dd {
    margin: 0;
    padding: 6px 0;
    letter-spacing: 0.5px;
    a {
      font-size: 14px;
      color: #5e5d5b;
      display: inline-block;
      padding: 2px 4px;
      transition: 0.1s;
      text-decoration: none;
      &:hover {
        background: #ff5a00;
        border-radius: 3px;
      }
    }
  }
  .nav_active {
    a {
      color: #ff5a00;
      background: transparent !important;
    }
  }
}
.tools-box {
  width: 1080px;
  min-height: 800px;
  margin: 0 auto;
  section {
    position: relative;
    width: 100%;
    min-height: 166px;
    padding: 42px 48px 10px 48px;
    border-radius: 8px;
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 20px;
    background-color: $bg-color-main;
    .point{
      position: absolute;
      left: 0;
      top: -60px;
      opacity: 0;
    }
    header {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      line-height: 42px;
      font-size: 15px;
      padding-left: 46px;
      font-weight: 600;
      flex-shrink: 0;
      border-bottom: 0.5px solid $border-color;
    }
    .tool-item {
      width: 164px;
      height: 42px;
      flex-shrink: 0;
      line-height: 42px;
      cursor: pointer;
      img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
        vertical-align: middle;
      }
      .tool-name {
        font-size: 14px;
        color: $font-color-222;
        vertical-align: middle;
      }
    }
  }
}

@media (max-width: 480px) {
  .tools-nav {
    display: none;
  }
  .tools-box{
    width: unset;
    section{
      padding: 58px 16px 16px 16px;
      header{
        padding: 0 16px;
      }
      .tool-item{
        width: 140px;
      }
    }
  }
}
</style>